<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>用户首页页面</title>

    <link rel="stylesheet" href="../extra.css">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="../../../plugins/font-awesome/css/font-awesome.min.css">
    <!-- IonIcons -->
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../../dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to to the body tag
to get the desired effect
|---------------------------------------------------------|
|LAYOUT OPTIONS | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand bg-white navbar-light border-bottom">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="index.html" class="nav-link">主页</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">联系</a>
            </li>
        </ul>

        <!-- SEARCH FORM -->
        <form class="form-inline ml-3">
            <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" type="search" placeholder="搜索" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-navbar" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </form>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <button style="font-weight: bold" type="button" class="button-pill button btn-danger"
                        onclick="logout()">
                    退出
                </button>
            </li>
            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">

            <li class="nav-item">
                <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#"><i
                        class="fa fa-th-large"></i></a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">


        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="../../../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info">
                    <a href="#" class="d-block">用户</a>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item ">
                        <a href="#" class="nav-link active">
                            <i class="nav-icon fa fa-dashboard"></i>
                            <p>
                                概况
                                <!--<i class="right fa fa-angle-left"></i>-->
                            </p>
                        </a>
                    </li>
                    <li class="nav-item ">
                        <a href="#" class="nav-link">
                            <i class="nav-icon fa fa-dashboard"></i>
                            <p>
                                用户信息
                                <i class="right fa fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="usernametable.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>个人信息</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="orderinfo.html" class="nav-link">
                                    <i class="fa fa-circle-o nav-icon"></i>
                                    <p>订单详情</p>
                                </a>
                            </li>

                        </ul>
                    </li>

                    <li class="nav-item has-treeview">
                        <a href="goodsservice.html" class="nav-link">
                            <i class="nav-icon fa fa-table"></i>
                            <p>
                                商品服务
                            </p>
                        </a>
                    </li>

                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">概况</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item">主页</a></li>
                            <li class="breadcrumb-item active">概况</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="card" id="apply_card" hidden="hidden">
                            <div class="card-header no-border">
                                <div class="d-flex justify-content-between">
                                    <h4 class="card-title">申请一卡通号码</h4>
                                </div>
                            </div>
                            <center>
                                <div class="card-body">
                                    <h1>一卡通申请状态：<span id="change">待申请</span></h1>
                                </div>
                                <div class="card-footer">
                                    <button id="a" class="btn button-glow btn-lg btn-primary" data-toggle="modal"
                                            data-target="#myModal" onclick="apply()">申请
                                    </button>
                                </div>
                            </center>
                        </div>

                        <div class="card">
                            <div class="card-header p-2">
                                <ul class="nav nav-pills">
                                    <li class="nav-item"><a class="nav-link" href="#timeline"
                                                            data-toggle="tab">Timeline</a></li>
                                </ul>
                            </div><!-- /.card-header -->
                            <div class="card-body">
                                <div class="tab-content">
                                    <div class="active tab-pane" id="activity">
                                        <!-- Post -->
                                        <div class="tab-pane" id="timeline">
                                            <!-- The timeline -->
                                            <ul class="timeline timeline-inverse">
                                                <!-- timeline time label -->
                                                <li class="time-label">
                                                    <span class="bg-danger">
                                                        10 Feb. 2014
                                                    </span>
                                                </li>
                                                <!-- /.timeline-label -->
                                                <!-- timeline item -->
                                                <li>
                                                    <i class="fa fa-envelope bg-primary"></i>
                                                    <div class="timeline-item">
                                                        <span class="time"><i class="fa fa-clock-o"></i> 12:05</span>

                                                        <h3 class="timeline-header"><a href="#">Support Team</a> sent
                                                            you an email</h3>

                                                        <div class="timeline-body">
                                                            Etsy doostang zoodles disqus groupon greplin oooj voxy
                                                            zoodles,
                                                            weebly ning heekya handango imeem plugg dopplr jibjab,
                                                            movity
                                                            jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo
                                                            kaboodle
                                                            quora plaxo ideeli hulu weebly balihoo...
                                                        </div>
                                                        <div class="timeline-footer">
                                                            <a href="#" class="btn btn-primary btn-sm">Read more</a>
                                                            <a href="#" class="btn btn-danger btn-sm">Delete</a>
                                                        </div>
                                                    </div>
                                                </li>
                                                <!-- END timeline item -->
                                                <!-- timeline item -->
                                                <li>
                                                    <i class="fa fa-user bg-info"></i>
                                                    <div class="timeline-item">
                                                        <span class="time"><i
                                                                class="fa fa-clock-o"></i> 5 mins ago</span>
                                                        <h3 class="timeline-header no-border"><a href="#">Sarah
                                                            Young</a> accepted your friend request</h3>
                                                    </div>
                                                </li>
                                                <!-- END timeline item -->
                                                <!-- timeline item -->
                                                <li>
                                                    <i class="fa fa-comments bg-warning"></i>
                                                    <div class="timeline-item">
                                                        <span class="time"><i
                                                                class="fa fa-clock-o"></i> 27 mins ago</span>
                                                        <h3 class="timeline-header"><a href="#">Jay White</a> commented
                                                            on your post</h3>
                                                        <div class="timeline-body">
                                                            Take me to your leader!
                                                            Switzerland is small and neutral!
                                                            We are more like Germany, ambitious and misunderstood!
                                                        </div>
                                                        <div class="timeline-footer">
                                                            <a href="#" class="btn btn-warning btn-flat btn-sm">View
                                                                comment</a>
                                                        </div>
                                                    </div>
                                                </li>
                                                <!-- END timeline item -->
                                                <!-- timeline time label -->
                                                <li class="time-label">
                                                    <span class="bg-success">
                                                        3 Jan. 2014
                                                    </span>
                                                </li>
                                                <!-- /.timeline-label -->
                                                <!-- timeline item -->
                                                <li>
                                                    <i class="fa fa-camera bg-purple"></i>
                                                    <div class="timeline-item">
                                                        <span class="time"><i
                                                                class="fa fa-clock-o"></i> 2 days ago</span>
                                                        <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded
                                                            new photos</h3>
                                                        <div class="timeline-body">
                                                            <img src="http://placehold.it/150x100" alt="..."
                                                                 class="margin">
                                                            <img src="http://placehold.it/150x100" alt="..."
                                                                 class="margin">
                                                            <img src="http://placehold.it/150x100" alt="..."
                                                                 class="margin">
                                                            <img src="http://placehold.it/150x100" alt="..."
                                                                 class="margin">
                                                        </div>
                                                    </div>
                                                </li>
                                                <!-- END timeline item -->
                                                <li>
                                                    <i class="fa fa-clock-o bg-gray"></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- /.tab-pane -->
                                </div>
                                <!-- /.tab-content -->
                            </div><!-- /.card-body -->
                        </div>
                        <!-- /.nav-tabs-custom -->
                    </div>
                    <!-- /.card -->
                    <!--</div>-->
                    <!-- /.row -->
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-header">
                                <h3>热门商品</h3>
                            </div>
                            <div class="card-body">
                                <table id="hotgoods-table" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <td>排名</td>
                                        <td>缩略图</td>
                                        <td>商品名</td>
                                        <td>价格</td>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- To the right -->
        <div class="float-right d-none d-sm-block-down">
            Anything you want
        </div>
        <!-- Default to the left -->
        <strong>Copyright &copy; 2018 Solitary.</strong> All rights reserved.
    </footer>
</div>
<!-- ./wrapper -->

<div class="modal" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 style="font-weight: bold" class="modal-title" id="myModalLabel">提示框</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">x
                </button>

            </div>
            <div class="modal-body">
                <center><h3>申请成功,请等待审核！</h3></center>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                    确定
                </button>
                <!--<button type="button" class="btn btn-primary">确定</button>-->
            </div>
        </div>
    </div>
</div>

<div class="modal" id="myModal1" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 style="font-weight: bold" class="modal-title" id="myModalLabel1">提示框</h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">x
                </button>

            </div>
            <div class="modal-body">
                <center><h3>请等待审核！</h3></center>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                    确定
                </button>
                <!--<button type="button" class="btn btn-primary">确定</button>-->
            </div>
        </div>
    </div>
</div>
<!-- REQUIRED SCRIPTS -->

<!-- jQuery -->
<script src="../../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="../../../dist/js/adminlte.js"></script>
<!-- DataTables -->
<script src="../../../plugins/datatables/jquery.dataTables.js"></script>
<script src="../../../plugins/datatables/dataTables.bootstrap4.js"></script>
<!-- OPTIONAL SCRIPTS -->
<script src="../../../plugins/chart.js/Chart.min.js"></script>
<script src="../../../dist/js/demo.js"></script>
<script src="../../../dist/js/pages/dashboard3.js"></script>
<script>
  let isApplied = false
  let isPassed = false
  let user_token = sessionStorage.getItem('user_token')
  let sq_id = sessionStorage.getItem('user_id')
  let auth_id = sessionStorage.getItem('user_type')
  let table

  $(function () {
    checkApplicationState()
    getHotGoods()
  })

  function showApplication() {
    if (!isPassed) {
      $('#apply_card')
        .removeAttr('hidden')
      if (isApplied) {
        $('#change')
          .text('审核中……')
        $('#a')
          .attr('class', 'btn btn-lg disabled')
        $('#a')
          .attr('data-target', 'myModal1')
      }

    }
  }

  function checkApplicationState() {
    let settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:8080/api/cards/application/' + sq_id,
      'method': 'GET',
      'headers': {
        'Authorization': user_token
      }
    }

    $.ajax(settings)
      .done(function (response) {
        console.log(response)
        if (response.code == 0) {
          console.log('审核已通过')
          isApplied = true
          isPassed = response.data.state == 1
        } else {
          console.log(response.message)
        }
        showApplication()
      })


  }

  function apply() {
    if (!isApplied) {
      doApply()
    }
  }

  function doApply() {
    let form = new FormData()
    form.append('sq_id', sq_id)
    form.append('auth_id', auth_id)

    let settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:8080/api/cards',
      'method': 'POST',
      'headers': {
        'Authorization': user_token
      },
      'processData': false,
      'contentType': false,
      'mimeType': 'multipart/form-data',
      'data': form
    }

    $.ajax(settings)
      .done(function (response) {
        console.log(response)
        response = JSON.parse(response)
        if (response.code == 0) {
          console.log('申请成功')
          isApplied = true
          $('#change')
            .text('审核中……')
          $('#a')
            .attr('class', 'btn btn-lg disabled')
          $('#a')
            .attr('data-target', 'myModal1')
        } else {
          console.log(response.message)
        }

      })

  }

  function getHotGoods() {
    let settings = {
      'async': true,
      'crossDomain': true,
      'url': 'http://127.0.0.1:8080/api/orders/hot',
      'method': 'GET',
      'headers': {
        'Authorization': user_token
      }
    }

    $.ajax(settings)
      .done(function (response) {
        console.log(response)
        // response = JSON.parse(response)
        if (response.code == 0) {
          console.log(response.data.list)
          renderHotGoods(response.data.list)

        } else {
          console.log(response.message)
        }

      })
  }

  function renderHotGoods(data) {
    table = $('#hotgoods-table')
      .DataTable({
        'paging': true,
        'lengthChange': false,
        'searching': false,
        'ordering': false,
        'info': true,
        'autoWidth': false,
        destroy: true,
        data: data,
        // columns: [
        //   { data: 'rank' },
        //   { data: 'goodsBean.gSimg' },
        //   { data: 'goodsBean.gName' },
        //   { data: 'gPrice' }
        // ],
        columnDefs: [
          {
            targets: 0,
            render: function (data, type, row, meta) {
              return '<td>' + row.rank + '</td>'
            }
          }
          , {
            targets: 1,
            render: function (data, type, row, meta) {
              return '<td><img class="img-size-50" src="' + row.goodsBean.gImg + '" onerror="this.src=\'a.png\'"></td>'

            }
          }, {
            targets: 2,
            render: function (data, type, row, meta) {
              return '<td>' + row.goodsBean.gName + '</td>'

            }
          }, {
            targets: 3,
            render: function (data, type, row, meta) {
              return '<td>' + row.goodsBean.gPrice + 'CNY</td>'

            }
          }]
      })


  }

  function logout() {
    sessionStorage.removeItem('user_token')
    window.location.href = '../common/login.html'

  }


</script>
</body>
</html>
